<template>
  <div class="index_news">
    <ul class="news-list" v-for="item in data.list" :key="item.id">
      <li class="news-li">
        <div v-if="data.is_img==='1'" class="img">
          <img :src="item.imgurl">
        </div>
        <div class="body">
          <div class="content">
            <span :style="{color:app_tabBar.config.secondcolor}">{{item.addtime}}</span>
            <a @click="linkViewPage(item)" class="url" :style="{color:app_tabBar.config.firstcolor}">{{item.title}}</a>
          </div>
          <p :style="{color:app_tabBar.config.secondcolor}">{{item.description}}</p>
        </div>
      </li>
    </ul>
    <a @click="linkMore" class="more" :style="{color:app_tabBar.config.secondcolor,borderColor:app_tabBar.config.secondcolor}">{{data.more_text}}</a>
  </div>
</template>
<script>
import { switchTab, navigateToViewPage } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  props: {
    data: Object
  },
  computed: {
    ...mapGetters(['app_tabBar'])
  },
  created() {
    this.data.list.forEach(item => {
      item.addtime = item.addtime.substring(0, 10)
    })
  },
  methods: {
    linkMore() {
      switchTab('news', this)
    },
    linkViewPage(item) {
      navigateToViewPage('news', item, this)
    }
  }
}
</script>
<style lang="scss" scoped>
.index_news {
  .news-list {
    margin-top: 30px;
    text-align: left;
    .news-li {
      display: flex;
      .img {
        width: 100px;
        margin-right: 15px;
        img {
          max-width: 100%;
        }
      }
      .body {
        flex: 1;
      }
      .content {
        margin-bottom: 10px;
        position: relative;
        &::before {
          position: absolute;
          content: '';
          width: 10px;
          height: 1px;
          bottom: 0;
          background-color: #000000;
          background-color: #000000;
          -webkit-transition: all 0.66s cubic-bezier(0.17, 0.84, 0.44, 1);
          transition: all 0.66s cubic-bezier(0.17, 0.84, 0.44, 1);
          z-index: 10;
        }
        a {
          border-bottom: 1px solid #efefef;
          font-size: 16px;
          color: #444444;
          display: block;
          padding-bottom: 20px;
          position: relative;
        }
        span {
          display: block;
          font-weight: 300;
          height: 30px;
          color: #848484;
          font-size: 16px;
          line-height: 30px;
        }
      }
      p {
        color: #848484;
        font-size: 13px;
        height: 36px;
        margin-bottom: 5px;
        overflow: hidden;
      }
    }
  }
}
</style>

